<import file="js.ueditor.ueditor#config" />
<import file="js.ueditor.ueditor#all" />
<style type="text/css">
    .bg-success {
        padding: 8px;
        border: 1px solid #4cae4c;
        margin-bottom: 5px;
    }
</style>
<div class="infocenter">
    <ol class="breadcrumb">
        <li><i class="fa fa-anchor"></i>
            &nbsp;邮件管理
        </li>
        <li>新信件</li>
    </ol>
    <div class="panel">
        <div class="panel-heading">
            <i class="fa fa-list"></i>
            &nbsp;发送新信件
        </div>
        <div class="panel-body">
            <div class="alert alert-warning">
                <h4>
                    <strong>选择公司</strong>
                </h4>
                <volist name="company" id="vo">
                    <div class="col-xs-3">
                        <a class="bg-danger btn-block deparment" href="#404" data-id="{$vo.id}"  data-name="{$vo.name}">
                            <span>{$vo.name}</span>
                        <span class="pull-right" style="font-size:16px;padding-top:4px">
                            <i class="fa fa-warning"></i>
                        </span>
                        </a>
                    </div>
                </volist>
                <div class="clearfix"></div>
            </div>
            <div class="alert alert-warning" id="step2" style="display:none;">
                <h4>
                    <strong>选择角色</strong>
                </h4>
                <volist name="role" id="vo">
                    <div class="col-xs-3">
                        <a class="bg-danger btn-block role" href="#404" data-id="{$vo.id}" data-name="{$vo.name}">
                            <span>{$vo.name}</span>
                        <span class="pull-right" style="font-size:16px;padding-top:4px">
                            <i class="fa fa-warning"></i>
                        </span>
                        </a>
                    </div>
                </volist>
                <div class="clearfix"></div>
            </div>
            <div class="alert alert-warning" id="step3" style="display:none;">
                <h4>
                    <strong>选择收件人</strong>
                    <!--<strong style="float: right;margin-right: 15px">　<button type="button" class="quanxuan btn btn-xs btn-warning">全选</button></strong>-->
                </h4>
                <volist name="user" id="vo">
                    <div class="col-xs-2">
                        <a class="bg-danger btn-block user" href="#404" data-role="{$vo.role}" data-class="{$vo.email}" data-id="{$vo.company}" data-name="{$vo.name}">
                            <span>{$vo.name}</span>
                        <span class="pull-right" style="font-size:16px;padding-top:4px">
                            <i class="fa fa-warning"></i>
                        </span>
                        </a>
                    </div>
                </volist>
                <volist name="member" id="vo">
                    <div class="col-xs-2">
                        <a class="bg-danger btn-block student" href="#404" data-class="{$vo.email}" data-id="{$vo.id}" data-name="{$vo.nickname}">
                            <span>{$vo.nickname}</span>
                        <span class="pull-right" style="font-size:16px;padding-top:4px">
                            <i class="fa fa-warning"></i>
                        </span>
                        </a>
                    </div>
                </volist>
                <div class="clearfix"></div>
            </div>
        <form class="mcit-dataform" id="form_check" method="post" action="__URL__/add" enctype="multipart/form-data">
            <div class="panel-footer">
                <div class="panel-mcit">
                    <div class="col-xs-12" style="margin-bottom:15px;">
                        <div class="input-group">
                            <span class="input-group-addon">收件人</span>
                            <input type="text"  name="email" class="form-control required" readonly>
                            <input type="hidden" name="mail"/>
                        </div>
                    </div>
                    <div class="col-xs-12" style="margin-bottom:15px;">
                        <div class="input-group">
                            <span class="input-group-addon">主题</span>
                            <input type="text" id="title" name="title" class="form-control required" placeholder="主题">
                        </div>
                    </div>
                    <div class="clearfix" ></div>
                    <div class="col-xs-12" style="margin-bottom:15px;">
                        <textarea name="content" id="myEditor"></textarea>
                        <script type="text/javascript">UE.getEditor('myEditor')</script>
                    </div>
                    <div class="clearfix" ></div>
                    <div class="col-xs-12" style="margin-bottom:15px;">
                        <button type="submit" class="btn btn-success"><i class="fa fa-upload"></i>&nbsp;确定发送</button>
                        <a href="javascript:history.go(-1);" class="btn btn-warning"><i class="fa fa-mail-reply"></i>&nbsp;返回</a>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
        </form>
        </div>
    </div>
</div>
<import file="js.maskedinput"/>
<script>
    $(".infocenter").on("click",'.deparment.bg-danger',function(){
        $(".deparment.bg-success").removeClass('bg-success').addClass('bg-danger').find('i').removeClass('fa-check-square-o').addClass('fa-warning');
        $(this).removeClass('bg-danger').addClass('bg-success').find('i').removeClass('fa-warning').addClass('fa-check-square-o');
        if ( $(this).attr('data-name')=='系统管理员' ){
            $("#step2").hide();
            $("#step3").show();
            $(".student").parent().hide();
            $(".user").each(function(i, item) {
                if ( $(item).attr('data-role')==805 ){
                    $(item).parent().show();
                }else{
                    $(item).parent().hide();
                }
            });
        }else if($(this).attr('data-name')=='会员'){
            $("#step2").hide();
            $("#step3").show();
            $(".user").parent().hide();
            $(".student").each(function(i, item) {
                $(item).parent().show();
            });
        }else{
            $("#step2").show();
            $("#step3").hide();
            testid = $(this).attr('data-id');
        }
    });

    $(".infocenter").on("click",'.role.bg-danger',function(){
        $(".role.bg-success").removeClass('bg-success').addClass('bg-danger').find('i').removeClass('fa-check-square-o').addClass('fa-warning');
        $(".class.bg-success").removeClass('bg-success').addClass('bg-danger').find('i').removeClass('fa-check-square-o').addClass('fa-warning');
        $(this).removeClass('bg-danger').addClass('bg-success').find('i').removeClass('fa-warning').addClass('fa-check-square-o');
        $("#step3").show();
        $(".student").parent().hide();
        var role = $(this).attr("data-id");
        $(".user").each(function(i, item) {
            if ( $(item).attr('data-id')==testid ){
                if($(item).attr("data-role") == role){
                    $(item).parent().show();
                }else{
                    $(item).parent().hide();
                }
            }else{
                $(item).parent().hide();
            }
        });
    });


    $(document).ready(function(){
        $("#form_check").validate(
                {
                    //debug: true,
                    //调试模式取消submit的默认提交功能
                    onkeyup: false,
                    errorClass: "mcit-error",
                    validClass: "mcit-valid",
                    email:true,
                    rules: {
                        num: {
                            minlength: 9
                        }
                    },
                    messages: {
                        num: {
                            minlength: "格式不对"
                        }
                    },
                    errorPlacement: function (error, element) {
                        error.appendTo(element.next());
                    },
                    highlight: function (element, errorClass) {
                        $(element).parent().addClass(errorClass);
                        $(element).next().css("display", "block");
                        $(element).next().next().hide();
                    },
                    success: function (label) {
                        label.parent().next().hide();
                        label.addClass('mcit-valid');
                        label.parent().parent().addClass('mcit-valid');
                        label.parent().css("display", "block");
                        label.html('<i class="fa fa-check"></i>&nbsp;OK');
                    }
                }
        );

        $(".quanxuan").click(function(){
            if($(this).attr("class").indexOf("btn-warning") != -1){
                $(this).removeClass('btn-warning').addClass('btn-success');
                $(this).parent().parent().parent().children().each(function(i,item){
                    //alert("开发中");
                    //alert($(item).children().attr("data-name"));
                });
            }else{
                $(this).removeClass('btn-success').addClass('btn-warning');

            }
        });

        var str = '';
        var strs = '';
        $(".infocenter").on("click",'.user',function(){
            var userEmail = $(this).attr("data-class");
            var username  = $(this).attr("data-name");
            if($(this).attr("class").indexOf("bg-danger") != -1){
                $(this).removeClass('bg-danger').addClass('bg-success').find('i').removeClass('fa-warning').addClass('fa-check-square-o');
                str  += username+'<'+userEmail+'>;';
                strs += userEmail+',';
                $("input[name='email']").val(str);
                $("input[name='mail']").val(strs);
            }else{
                $(this).removeClass('bg-success').addClass('bg-danger').find('i').addClass('fa-warning').removeClass('fa-check-square-o');
                str = str.replace(username+'<'+userEmail+'>;',"");
                strs = str.replace(userEmail+',',"");
                $("input[name='email']").val(str);
                $("input[name='mail']").val(strs);
            }
        });
        $(".infocenter").on("click",'.student',function(){
            var userEmail = $(this).attr("data-class");
            var username  = $(this).attr("data-name");
            if($(this).attr("class").indexOf("bg-danger") != -1){
                $(this).removeClass('bg-danger').addClass('bg-success').find('i').removeClass('fa-warning').addClass('fa-check-square-o');
                str  += username+'<'+userEmail+'>;';
                strs += userEmail+',';
                $("input[name='email']").val(str);
                $("input[name='mail']").val(strs);
            }else{
                $(this).removeClass('bg-success').addClass('bg-danger').find('i').addClass('fa-warning').removeClass('fa-check-square-o');
                str = str.replace(username+'<'+userEmail+'>;',"");
                strs = str.replace(userEmail+',',"");
                $("input[name='email']").val(str);
                $("input[name='mail']").val(strs);
            }
        });
    })
</script>